@layer components {
    input[type='checkbox']:not([is-='switch']) {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        display: inline-block;
        position: relative;
        width: 3ch;
        min-width: initial;
        vertical-align: text-top;
        color: var(--foreground2);
        font-family: var(--font-family);
        font-size: var(--font-size);
        line-height: var(--line-height);
        outline: none;
    }

    input[type='checkbox']:not([is-='switch'])::before {
        content: '';
        position: absolute;
        inset: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3ch;
        height: 1lh;
        background: var(--background1);
    }

    input[type='checkbox']:not([is-='switch']):checked::before {
        content: 'X';
    }

    label:has(input[type='checkbox']:not([is-='switch'])) {
        display: inline-flex;
        align-items: flex-start;
        gap: 1ch;
        max-width: fit-content;
    }

    label:has(input[type='checkbox']:not([is-='switch']):focus) {
        font-weight: bold;
        text-decoration: underline;
    }

    input[type='checkbox']:not([is-='switch']):disabled {
        color: var(--foreground2);
        pointer-events: none;
    }

    label:has(input[type='checkbox']:not([is-='switch']):disabled) {
        color: var(--foreground2);
        text-decoration: line-through;
    }
}
